<div class="pic_adv_board">
    <div class="pic_adv_leftColumn">
        <a href="#" class="pic_item">
            <img src="./img/adv1.jpg" alt="">
            <p class="pic_item_name" style="font-size: 13px;">
                【半价】SK-II 护肤精华露-神仙水 230ml
            </p>
        </a>
        <a href="#" class="pic_item">
            <img src="./img/adv2.jpg" style="height: 240px">
        </a>
        <div class="product_item">
            <!-- <a href="#">
                <img src="./img/shoppinglist1-1.jpg" alt="">
            </a>
            <i class="product_item_icon">
                <span class="product_item_discount_num">53</span>
                <span class="product_item_discount_percent">%</span>
                <span class="product_item_discount_off">off</span>
            </i>
            <a href="#" class="product_item_name" target="_blank">
				悦木之源 灵芝焕能精华水 菌菇水 (200 ml)
            </a>
            <div class="product_item_price">
				<span class="product_item_price_cur">HK$153.0</span>
				<span class="product_item_price_old">HK$320.0</span>
            </div>
            <a href="#">
                <div class="product_item_cart add_cart">加入购物车</div>
            </a>
            <span >
                <div class="product_item_more"></div>
            </span> -->
        </div>
    </div>

    <div class="pic_adv_rightColumn">
        <div id="focus">
            <!-- 下面这个div是 轮播图 盒子 改变背景图 实现切换 -->
            <div class="focus_pic pic_item_lg" style="opacity: 1; background-image: url(./img/carsoule0.jpg)"></div>
            <ul class="focus_nav">
                <li class="choose"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>

        <div class="email_collection">
            <form name="newsletterSubForm" id="newsletterSubForm" action="#">
                <input id="newsletterEmail" name="newsletterEmail" type="text" placeholder="输入电邮">
            </form>
            <div class="email_collection_btn" id="newsletterSubmit">提交</div>
            <div class="country_selector">中国香港特别行政区</div>
            <div class="down_arrow"></div>
            <div class="sep_bar"></div>
            <!--  点击country_selector ul加class slide_down  down_arrow加class arrow_up -->
            <ul class="country_selector_dropdown">
                <li class="country_selector_dropdown_item">美国</li>
                <li class="country_selector_dropdown_item">加拿大</li>
                <li class="country_selector_dropdown_item">澳洲</li>
                <li class="country_selector_dropdown_item">英国</li>
                <li class="country_selector_dropdown_item">中国内地</li>
                <li class="country_selector_dropdown_item">中国香港特别行政区</li>
                <li class="country_selector_dropdown_item">中国澳门特别行政区</li>
                <li class="country_selector_dropdown_item">中国台湾</li>
                <li class="country_selector_dropdown_item">马来西亚</li>
                <li class="country_selector_dropdown_item">新加坡</li>
                <li class="country_selector_dropdown_item">泰国</li>
                <li class="country_selector_dropdown_item">菲律宾</li>
                <li class="country_selector_dropdown_item">印尼</li>
                <li class="country_selector_dropdown_item">日本</li>
                <li class="country_selector_dropdown_item">南韩</li>
                <li class="country_selector_dropdown_item">俄罗斯</li>
                <li class="country_selector_dropdown_item">国际</li>
            </ul>

        </div>

        <div class="item_slide_three slide_widget slide_editor_choices">
            <div class="item_slide_three_head slide_head_editor_choices"></div>
            <div class="item_slide_three_content">
                <div class="item_slide_three_btn item_slide_three_left"></div>
                <div class="item_slide_three_btn item_slide_three_right"></div>
                <div class="item_slide_three_wrapper slide_wrapper">
                    <!-- <ul class="item_slide_three_innner slide_inner">
                        <li class="item_slide_three_item slide_item">
                            <div class="item_slide_three_imgWrapper">
                                <a href="#" target="_blank">
                                    <img src="./img/shoppinglist2-1.jpg">
                                </a>
                            </div>
                            <a class="item_slide_three_name" href="#">Dr. Jart+ 水活力水润蓝丸面膜  (25 g)</a>
                            <div class="item_slide_three_price">
                                <span class="item_slide_three_price_cur">HK$99.0</span>
                                <span class="item_slide_three_price_old">HK$230.0</span>
                            </div>
                            <a href="#"><div class="item_slide_three_cart  add_cart">加入购物车</div></a>
                        </li>
                        <li class="item_slide_three_item slide_item">
                            <div class="item_slide_three_imgWrapper">
                                <a href="#" target="_blank">
                                    <img src="./img/shoppinglist3-1.jpg">
                                </a>
                            </div>
                            <a class="item_slide_three_name" href="#">伊丽莎白 · 雅顿 升级版金致胶囊精华液(金胶) (90capsule(s))</a>
                            <div class="item_slide_three_price">
                                <span class="item_slide_three_price_cur">HK$428.0</span>
                                <span class="item_slide_three_price_old">HK$840.0</span>
                            </div>
                            <a href="#"><div class="item_slide_three_cart  add_cart">加入购物车</div></a>
                        </li>
                    </ul> -->
                </div>
            </div>
        </div>
    </div>
</div>



<script>

        $(function(){
            function sendAjax(url,obj,fn){
                $.ajax({
                    url: url,
                    type: "post",
                    headers: {
                        token: localStorage.getItem("token")
                    },
                    data: obj,
                }).then(function(res){
                    fn(res);
                })
            }
            //发送之前的拦截器 
            axios.interceptors.request.use(function (config) {
                config.baseUrl = "http://127.0.0.1:8585";
                //发送之前,读取token
                config.headers.token = localStorage.getItem("token");
                return config
            })

            axios({
                url: "/api/index",
                method: "get"
            }).then(function (res) {
                if(res.data.status==-200){
                    console.log(res);
                    layer.confirm('您还没有登录,请先登录或注册', {btn: ['登录','注册']}, function(){
                         layer.msg("即将跳转到登录页面");
                         setTimeout(function(){
                            javascrtpt:window.location.href='http://localhost:8585/login.html'
                        },1000)
                    }, function(){
                        layer.msg("即将跳转到注册页面");
                        setTimeout(function(){
                            javascrtpt:window.location.href='http://localhost:8585/register.html'
                        },1000)
                    });
                    return;
                }
                showSmallCart();
                var proitem=[...res.data.data][3];
                var html = `<ul class="item_slide_three_innner slide_inner">`;
                var prohtml=`<a href='./detail.html?gid=${proitem.gid}' target='_blank' data='${proitem}'>`;
                prohtml+=`<img src="${proitem.giconimgsrc[0]}"></a><i class="product_item_icon">`;
                prohtml+=`<span class="product_item_discount_num">54</span><span class="product_item_discount_percent">%</span>`;
                prohtml+=`<span class="product_item_discount_off">off</span></i>`;
                prohtml+=`<a href='./detail.html?gid=${proitem.gid}' target='_blank' data='${proitem}' class='product_item_name'>${proitem.gbrand} ${proitem.gtitle}</a>`;        
                prohtml+=`<div class="product_item_price"><span class="product_item_price_cur">HK$${proitem.gnowpirce}</span>`;
                prohtml+=`<span class="product_item_price_old">HK$${proitem.goldpirce}</span></div><a href='javascript:;'>`;
                prohtml+=`<div class="product_item_cart add_cart" data-info='${JSON.stringify(proitem)}'>加入购物车</div></a><span><div class="product_item_more"></div></span>`;

                [...res.data.data].forEach(function (el) {
                    html += `<li class="item_slide_three_item slide_item"><div class="item_slide_three_imgWrapper">`;
                    html += `<a href='./detail.html?gid=${el.gid}' data='${el}' target="_blank"><img src="${el.giconimgsrc[0]}"></a>`;
                    html += `</div><a class="item_slide_three_name" href='./detail.html?gid=${el.gid}' data='${el}'>${el.gbrand} ${el.gtitle}</a>`;
                    html += `<div class="item_slide_three_price"><span class="item_slide_three_price_cur">HK$${el.gnowpirce}</span>`;
                    html += `<span class="item_slide_three_price_old">HK$${el.goldpirce}</span></div>`;
                    html += `<a href="javascript:;" ><div class="item_slide_three_cart add_cart" data-info='${JSON.stringify(el)}'>加入购物车</div></a></li>`;
                })
                html += `</ul>`;
                $(".pic_adv_board .slide_wrapper").html(html);
                $(".product_item").html(prohtml);


                $(".item_slide_three .slide_inner").attr("count",0).attr("wid",420).attr("last",630);
                $(".adv1 .slide_inner").attr("count",0).attr("wid",690).attr("last",920);
                $(".adv2 .slide_inner").attr("count",0).attr("wid",690).attr("last",920);
                $(".brand_slide_content .slide_inner").attr("count",0).attr("wid",520).attr("last",920);
                $(".item_slide_three_left").on("click",btnLeftClickHandler);
                $(".item_slide_three_right").on("click",btnRightClickHandler);


                function btnRightClickHandler(){
                    var $ul=$(this).siblings(".slide_wrapper").children(".slide_inner");
                    var cou=($ul.attr("count")-0)-1;
                    var step=$ul.attr("wid")-0;
                    var minCount=Math.floor($ul.width()/step);
                    if(cou<-minCount) {cou=-minCount;}
                    $ul.attr("count",cou);     
                    $ul.animate({
                        left:cou==-minCount?($ul.attr("last")-$ul.width()):(parseInt($ul.css("left"))-($ul.attr("wid")-0)),
                    },500);  
                    
                }
                function btnLeftClickHandler(){
                    var $ul=$(this).siblings(".slide_wrapper").children(".slide_inner");
                    var cou=($ul.attr("count")-0)+1;
                    if(cou>0) cou=0;
                    $ul.attr("count",cou); 
                    $ul.animate({
                        left:cou==0?0:(parseInt($ul.css("left"))+($ul.attr("wid")-0)),
                    },500)
                }

                $(".add_cart").on("click",function(){

                    let data = JSON.parse($(this).attr("data-info"));
                    console.log(data)
                    delete(data.gdiscount);
                    delete(data.geffect);
                    delete(data.goldpirce);
                    delete(data.gposition);
                    delete(data.gspecification);
                    //添加购买数量
                    data.num =1;
                    //添加购物人
                    data.uid = JSON.parse(localStorage.getItem("users")).uId;
                    //修改购物车内的显示图片
                    data.giconimgsrc = data.giconimgsrc[0];
                    console.log(data);
                    //把data 通过ajax发送到 后台
                    $.ajax({
                        url: "./api/addCart",
                        type: "post",
                        data: data,
                        headers: {
                            token: localStorage.getItem("token")
                        },
                    }).then(function (res) {
                        layer.msg("已成功加入购物车");
                        showSmallCart();
                        console.log(res);
                    })
                })
                function showSmallCart(){
                    sendAjax("./api/getCart",{uid: JSON.parse(localStorage.getItem("users")).uId},function(res){
                        if (!res.data) {
                            $("#cart-box").find(".content_null").css("display","block").siblings(".content_catalog").css("display","none")
                            $("#cart-box").find(".shop-cart").children("em").text("0");
                            return;
                        }else{
                            // console.log(res.data);
                            let cartList=res.data;
                            // console.log(cartList)
                            let smallCartsSumpirce=0;
                            let smallCartsSumlength=0;
                            $("#cart-box").find(".shop-cart").children("em").text(cartList.length);
                            $("#cart-box").find(".content_null").css("display","none").siblings(".content_catalog").css("display","block")
                            var cartStr=`<ul id="shoppingCartDetails"><!-- 每一个li 是一个购物车内的商品 -->`;
                            cartList.forEach((item,index)=>{
                                cartStr+=`<li class="border-dashed"><!-- left 是一个图片 --><span class="box_left"><a href="./detail.html?gid=${item.gid}">`;
                                cartStr+=`<img src="${item.giconimgsrc}" ></a></span><!-- right 有品牌 标题 价格 数量 --><span class="box_right">`;
                                cartStr+=`<h1><a href="javascript:;">${item.gbrand}</a><br><a href="javascript:;">${item.gtitle}</a></h1><b class="fon-price">`;
                                cartStr+=`HK$<span>${item.gnowpirce}</span><em> x ${item.num}</em></b><a class="btn-delete" data-info='${JSON.stringify(item)}'>X</a></span></li></ul>`;
                                smallCartsSumpirce+=item.gnowpirce*item.num;
                                smallCartsSumlength+=item.num;
                            });
                            cartStr+=`</ul>`;
                            $(".rank-list").html(cartStr);

                            let cartMsgStr=`<div class="fon-price" align="left" style="width:40%">&nbsp;<span class="fon-MSYH">共</span>`;
                                cartMsgStr+=`&nbsp;<b><span id="basketitem">${smallCartsSumlength}</span></b>&nbsp;<span class="fon-MSYH">件商品</span></div>`;
                                cartMsgStr+=`<div class="fon-price" align="right" style="width:60%"><span class="fon-MSYH">共计：</span>`;
                                cartMsgStr+=`<b>HK$<span id="baskettotal">${smallCartsSumpirce}</span></b></div><a href="./shoppingCar.html">`;
                                cartMsgStr+=`<div class="btn_checkout">查看购物车</div></a>`;      
                            $(".content_notice").html(cartMsgStr);
                            $(".rank-list").on("click",".btn-delete",function(){
                                var self = this;
                                var cid = $(this).data("info").cid;
                                var delNum= $(this).data("info").num;
                                var delPirce= ($(this).data("info").gnowpirce)*delNum;
                                console.log(cid,delNum,delPirce)
                                layer.confirm('是否将该商品从购物车中删除?', {btn: ['确认','取消'] }, 
                                    function(){
                                        sendAjax("./api/delete",{cid},function(res){
                                            layer.msg("删除成功");
                                            $(self).parents(".border-dashed").remove();
                                            setTimeout(function(){
                                                console.log(res);
                                                $("#basketitem").text($("#basketitem").text()-delNum);
                                                $("#baskettotal").text($("#baskettotal").text()-delPirce);
                                                var cartxtNum=$("#cart-box").find(".shop-cart").children("em").text();
                                                if(cartxtNum!=0){
                                                    $("#cart-box").find(".shop-cart").children("em").text(cartxtNum-1);
                                                    if(cartxtNum==1){
                                                        $("#cart-box").find(".shop-cart").children("em").text(0)
                                                        $("#cart-box").find(".content_null").css("display","block").siblings(".content_catalog").css("display","none");
                                                    }
                                                }
                                            },100);
                                        })
                                    }, function(){return;}
                                );
                            });
                        }
                    })
                }
            })
        })

</script>
   

<script src="./js/advCarsoule.js"></script>  
<script src="./js/adv.js"></script>
<script src="./js/adv1.js"></script> 

